<template>
	<div class="collection">

		<div class="aside-wrap">
			<div class="aside-head">
				<h2>全部分类</h2>
			</div>
			<div class="collect-aside">
				<ul class="aside-ul">
					<li v-for="(list,index) in lists">
						<span @click="btn(index)" :class="{active:index == num}">{{list.title}}</span>
					</li>
				</ul>
			</div>
		</div>
		<div class="list-wrap" v-show="show">
			<div class="success-list">
				<ul class="success-ul">
					<li class="success-li" v-for="item in goodsList">
						<div v-if="nickName">
							<a :href="'#/shopmsg/'+item._id">
								<img class="success-img" :src="'/taobao/'+ item.shopImg" alt="" /> 
							</a>
							<!--{{item._id}}-->
						</div>
						<div v-else>
							<a href="#/login">
								<img class="success-img" :src="'/taobao/'+ item.shopImg" alt="" /> 
							</a>
						</div>
						<div class="success-msg">
							<div v-if="nickName">
								<a class="title" :href="'#/shopmsg/'+item._id">{{item.title}}</a>
							</div>
							<div v-else="">
								<a class="title" href="#/login">{{item.title}}</a>
							</div>
							<p style="color: #999;font-size: 14px;">月销量: {{item.monNum}} 件</p>
							<p style="color: red; font-size: 14px;">¥ {{item.price}} <span></span></p>
						</div>
					</li>
				</ul>
			</div>

			<div class="shop-wrap" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="20">
				<img src="./../assets/loading-spinning-bubbles.svg" v-show="loading">
			</div>
		</div>
	</div>

</template>

<script>
	import $ from 'jquery'
	import axios from 'axios'
	import { mapState } from 'vuex'
	

	export default {
		data() {
			return {
				lists: [{
						title: '为您推荐',

					},
					{
						title: '国际大牌',

					},
					{
						title: '天猫国际',

					},
					{
						title: '女装',

					},
					{
						title: '女鞋',

					},
					{
						title: '男装',

					},
					{
						title: '男鞋',

					},
					{
						title: '手机',

					},
				],
				num: 0,
				goodsList: [],
				page: 1,
				pageSize: 10,
				loading: false,
				busy: false,
				mdShow: false,
				show: true

			}
		},
		computed: {
			...mapState(['nickName'])
		},
		mounted() {
			this.getGoodsList();
		},

		methods: {
			btn(index) {
				if(this.show = false) {
					this.show = true
				} else {
					this.show = false;
					setTimeout(() => {
						this.show = true
					}, 400)
				}
				this.num = index;

			},
			
			getGoodsList(flag) {
				var that = this
				var param = {
					page: that.page,
					pageSize: that.pageSize,
				};
				that.loading = true;
				axios.get("/taobao/list", {
					params: param
				}).then(function(response) {
					var res = response.data;
					that.loading = false;
					if(res.error == "0") {
						if(flag) {
							that.goodsList = that.goodsList.concat(res.result.list);
							if(res.result.count == 0) {
								that.busy = true;
							} else {
								that.busy = false;
							}
						} else {
							that.goodsList = res.result.list;
							that.busy = false;
						}

					} else {
						that.datas = [];
					}
				})
			},
			loadMore() {
				var that = this
				this.busy = false;
				setTimeout(function() {
					this.page++;
					that.getGoodsList(true);
				}, 500);
			},
		},

	}
</script>

<style scoped="">
	.collect-aside {
		float: left;
	}
	
	.collection {
		width: 360px;
	}
	
	.aside-wrap {
		position: fixed;
		height: 60px;
	}
	
	.collection .aside-head {
		border-bottom: solid 1px #ccc;
		height: 55px;
		line-height: 55px;
		width: 360px;
		color: #fff;
		background: orange;
	}
	
	.collect-aside .aside-ul {
		text-align: center;
	}
	
	.aside-ul li {
		border-bottom: solid 1px #ccc;
		width: 90px;
		background: #eee;
	}
	
	.aside-ul li span {
		font-size: 14px;
		color: #999;
		display: block;
		padding: 22px 0px;
		cursor: pointer;
	}
	
	.active {
		background: #fff;
		color: #333;
	}
	
	.list-wrap {
		width: 260px;
		float: right;
		margin-top: 48px;
	}
	
	.success-ul {
		float: right;
		overflow: hidden;
	}
	
	.success-ul .success-li {
		float: left;
		border: solid 1px #ccc;
		padding: 3px;
		margin: 5px;
	}
	
	.success-img {
		width: 110px;
		height: 110px;
		border: solid 1px #eee;
	}
</style>